<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full">
    <!-- 顶部 Banner -->
    <section class="w-full pb-[32%] lg:pb-[21%] relative">
      <img
        src="../assets/images/about-banner.png"
        alt=""
        class="w-full h-full object-cover absolute top-0 left-0"
      />
      <!-- <div class="w-full h-full absolute top-0 left-0">
        <div class="w-full h-full max-w-300 mx-auto flex flex-col justify-center pb-20">
          <h1 class="text-[60px] leading-[50px] font-bold gradient-text">ABOUT US</h1>
          <h2 class="text-9 leading-9 font-bold">關於我們</h2>
        </div>
      </div> -->
    </section>
    <!-- 關於我們內容 -->
    <section class="w-full max-w-300 mx-auto pt-5 flex flex-col lg:flex-row">
      <div
        class="w-full pb-1/1 lg:w-4/7 lg:pb-4/7 relative transform lg:translate-x-[-20%] mr-[-10%]"
      >
        <img
          src="../assets/images/about1.png"
          alt=""
          class="w-full h-full object-cover absolute top-0 left-0"
        />
      </div>
      <div class="flex-1 px-3 lg:px-0">
        <!-- 服務項目 宫格 -->
        <ul class="grid gap-3 grid-cols-3">
          <li class="w-full pb-2/3"></li>
          <li
            class="w-full pb-2/3 relative border-box"
            v-for="(advantage, index) in aboutConfig?.advantage_type"
            :key="advantage?.title + advantage?.id"
          >
            <div class="w-full h-full absolute top-0 left-0 p-4 flex flex-col justify-between">
              <p class="text-[#F2F7EF] text-xl md:text-3xl lg:text-5xl font-bold text-right">
                0{{ index + 1 }}
              </p>
              <p class="text-[12px] text-[#262223]">{{ advantage?.title }}</p>
            </div>
          </li>
          <!-- <li class="w-full pb-2/3 relative border-box bg-[#F9FCF8]">
            <div class="w-full h-full absolute top-0 left-0 p-4 flex flex-col justify-between">
              <p class="text-[#F2F7EF] text-xl md:text-3xl lg:text-5xl font-bold text-right">02</p>
              <p class="text-[12px] text-[#262223]">遙感</p>
            </div>
          </li>
          <li class="w-full pb-2/3 relative border-box bg-[#F9FCF8]">
            <div class="w-full h-full absolute top-0 left-0 p-4 flex flex-col justify-between">
              <p class="text-[#F2F7EF] text-xl md:text-3xl lg:text-5xl font-bold text-right">04</p>
              <p class="text-[12px] text-[#262223]">土地管理</p>
            </div>
          </li>
          <li class="w-full pb-2/3 relative border-box">
            <div class="w-full h-full absolute top-0 left-0 p-4 flex flex-col justify-between">
              <p class="text-[#F2F7EF] text-xl md:text-3xl lg:text-5xl font-bold text-right">03</p>
              <p class="text-[12px] text-[#262223]">建築測量</p>
            </div>
          </li> -->
        </ul>
        <!-- 服務項目 文字描述 -->
        <div class="mt-5 md:mt-15 lg:mt-25">
          <h2 class="text-4.5 md:text-6.5 lg:text-9 font-bold">
            {{ aboutConfig?.about?.page_title }}
          </h2>
          <p class="text-sm mg:text-lg leading-loose mt-5 pb-5 md:pb-0">
            {{ aboutConfig?.about?.page_content }}
          </p>
        </div>
      </div>
    </section>
    <!-- 介绍 -->
    <section class="w-full relative">
      <img
        src="../assets/images/about-content.png"
        class="w-full h-full absolute top-0 left-0"
        alt=""
      />
      <div class="w-full relative px-3 lg:px-0 z-9">
        <div class="w-full h-full max-w-300 mx-auto py-10 md:py-20 md:flex">
          <div
            class="flex-1 mb-5 md:mb-0 md:mr-5 p-3 px-10 bg-white flex flex-col justify-center rounded-lg"
          >
            <img
              :src="highlight_type.single?.pic || '../assets/images/about-i1.png'"
              class="size-15 mx-auto"
              alt=""
            />
            <h4 class="text-2xl text-center my-5">{{ highlight_type.single?.title }}</h4>
            <p class="text-[#7B7D85] leading-relaxed text-sm">
              {{ highlight_type?.single?.content }}
            </p>
          </div>
          <div class="w-full md:w-2/3 h-full">
            <ul class="h-full flex flex-wrap gap-[20px]">
              <li
                v-for="item in highlight_type.multiple"
                :key="item.title + item.pic"
                class="bg-white w-[calc(50%-10px)] h-auto md:h-[calc(50%-10px)] rounded-lg p-3 px-5 flex flex-col justify-center"
              >
                <img
                  :src="item.pic || '../assets/images/about-i2.png'"
                  class="size-8 md:size-12 lg:size-15 mx-auto"
                  alt=""
                />
                <h4 class="text-sm md:text-base lg:text-2xl text-center my-5">
                  {{ item.title }}
                </h4>
                <p class="text-[#7B7D85] leading-relaxed text-xs md:text-sm h-[75px] md:h-[46px]">
                  {{ item.content }}
                </p>
              </li>
              <!-- <li
                class="bg-white w-[calc(50%-10px)] h-auto md:h-[calc(50%-10px)] rounded-lg p-3 px-5 flex flex-col justify-center"
              >
                <img
                  src="../assets/images/about-i3.png"
                  class="size-8 md:size-12 lg:size-15 mx-auto"
                  alt=""
                />
                <h4 class="text-sm md:text-base lg:text-2xl text-center my-5">遙感</h4>
                <p class="text-[#7B7D85] leading-relaxed text-xs md:text-sm h-[75px] md:h-[46px]">
                  了解衛星影像及其在現代測繪實踐中的重要作用
                </p>
              </li>
              <li
                class="bg-white w-[calc(50%-10px)] h-[calc(50%-10px)] rounded-lg p-3 px-5 flex flex-col justify-center"
              >
                <img
                  src="../assets/images/about-i4.png"
                  class="size-8 md:size-12 lg:size-15 mx-auto"
                  alt=""
                />
                <h4 class="text-sm md:text-base lg:text-2xl text-center my-5">建築測量</h4>
                <p class="text-[#7B7D85] leading-relaxed text-xs md:text-sm h-[75px] md:h-[46px]">
                  獲得現場測量與放樣實踐技能的實踐操作經驗，這對建築項目至關重要
                </p>
              </li>
              <li
                class="bg-white w-[calc(50%-10px)] h-[calc(50%-10px)] rounded-lg p-3 px-5 flex flex-col justify-center"
              >
                <img
                  src="../assets/images/about-i5.png"
                  class="size-8 md:size-12 lg:size-15 mx-auto"
                  alt=""
                />
                <h4 class="text-sm md:text-base lg:text-2xl text-center my-5">土地管理</h4>
                <p class="text-[#7B7D85] leading-relaxed text-xs md:text-sm h-[75px] md:h-[46px]">
                  探索土地管理的法律與監管環境，深入研究財產法和行政程序
                </p>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 学习环境 -->
    <section class="w-full max-w-300 mx-auto py-10 lg:py-20">
      <div class="font-bold px-3 lg:px-0">
        <p
          class="text-xl md:text-3xl lg:text-5xl flex flex-col text-[#EFF2F7] font-MiSans-Heavy font-800"
        >
          <span class="font-MiSans-Heavy"> LAND </span>
          <span class="font-MiSans-Heavy">SURVEY</span>
        </p>
        <div
          class="font-MiSans-Medium transform translate-y-[-14px] md:translate-y-[-20px] lg:translate-y-[-28px] mb-[-28px] flex flex-col lg:flex-row items-start lg:items-end"
        >
          <p class="text-sm md:text-xl lg:text-3xl">{{ aboutConfig?.environment?.page_title }}</p>
          <p class="text-xs md:text-sm lg:text-base font-400 lg:text-right flex-1">
            {{ aboutConfig?.environment?.page_content }}
          </p>
        </div>
      </div>
      <div class="pt-10 lg:pt-20">
        <div class="w-full relative">
          <swiper :watchSlidesProgress="true" :slidesPerView="isMobile ? 2 : 4" class="mySwiper">
            <swiper-slide
              v-for="(value, index) in aboutConfig?.technology_type"
              :key="value.title + value.id"
            >
              <div class="w-full h-full p-3 px-10 relative">
                <!-- 点 -->
                <div
                  class="w-3 h-3 rounded-full absolute top-1/2 left-10 transform -translate-y-1/2 z-999"
                  :style="{ background: token.colorPrimary }"
                ></div>
                <!-- 线 -->
                <hr
                  class="absolute top-1/2 left-0 transform -translate-y-1/2 z-2 w-full border-none border-t-solid border-[#F6F9FE]"
                />
                <div
                  class="absolute w-full h-1/2 top-0 left-0 pl-10 py-5 flex flex-col-reverse justify-between item"
                >
                  <!-- 序号 -->
                  <p class="text-2xl font-bold">
                    {{ index + 1 > 9 ? index + 1 : '0' + (index + 1) }}
                  </p>
                  <!-- 标题 -->
                  <p class="text-lg text-[#262223]">{{ value.title }}</p>
                  <!-- 介绍 -->
                  <a-typography-paragraph :ellipsis="{ rows: 2 }" :content="value.content" />
                </div>
              </div>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </section>
    <!-- 底部 -->
    <section class="w-full pb-2/3 md:pb-1/3 lg:pb-23/100 relative">
      <img
        src="../assets/images/about-footer.png"
        class="w-full h-full absolute top-0 left-0"
        alt=""
      />
      <div class="w-full h-full absolute top-0 left-0">
        <div
          class="w-full h-full max-w-250 mx-auto flex flex-col items-center justify-center text-white"
        >
          <h1 class="text-2xl md:text-3xl lg:text-[50px] font-bold">
            {{ aboutConfig?.lead_to?.page_title }}
          </h1>
          <p class="text-sm md:text-base lg:text-[22px] leading-loose mt-3 md:mt-10 text-center">
            {{ aboutConfig?.lead_to?.page_content }}
          </p>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
import { theme } from 'ant-design-vue'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { aboutConfigApi } from '@/api'
import type { AboutConfigType } from '@/api/type'
import 'swiper/css'

const { token } = theme.useToken()
const isMobile = ref(false)
const aboutConfig = ref<AboutConfigType>()
const highlight_type = computed(() => {
  const multiple = aboutConfig.value?.highlight_type?.slice(1)

  return {
    single: aboutConfig.value?.highlight_type[0],
    multiple,
  }
})

const onResize = () => {
  const w = window.screen.width
  if (w < 768) {
    isMobile.value = true
  } else {
    isMobile.value = false
  }
}

const getAboutConfig = () => {
  aboutConfigApi().then((res) => {
    aboutConfig.value = res
    console.log(res, 'about')
  })
}
onMounted(() => {
  getAboutConfig()
  onResize()
  window.addEventListener('resize', onResize)
})
onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
})
</script>

<style scoped>
.gradient-text {
  /* 1. 设置字体（可选，这里用你之前提到的 MiSans-Medium） */
  font-family: 'MiSans-Medium', sans-serif;
  font-size: 48px;
  font-weight: bold;

  /* 2. 定义渐变背景 */
  background-image: linear-gradient(to bottom, #3fca7f, #fff);

  /* 3. 关键步骤：将背景裁剪到文字区域 */
  -webkit-background-clip: text; /* 兼容 Safari/Chrome */
  background-clip: text;

  /* 4. 将文字颜色设为透明，让渐变背景显现 */
  color: transparent;
}
.border-box {
  border-radius: 10px;
  border: 2px solid #f9fcf8;
}

.swiper {
  width: 100%;
}
.swiper-slide {
  height: 300px;
}
.swiper-slide:nth-of-type(2n + 1) .item {
  top: 50%;
  flex-direction: column;
}
:deep(.ant-typography) {
  margin-bottom: 0 !important;
  color: #7b7d85 !important;
}
</style>
